{extend name='common/common' /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-diamond"></i></span>
		<span class="span-warning">{$depart.name|default=''}</span>
		固定资产管理
		<el-button class="header-btn" type="info" size="small"
			icon="fa fa-plus" plain @click="addRow"> 添加一行</el-button>
		<el-button class="header-btn" type="primary" size="small"
			icon="el-icon-edit-outline" plain @click="saveRow2Table"> 保存成表</el-button>
	</div>
	<div class="formBox">
		<el-form :model="search" :inline="true" ref="seaForm" label-width="100px">
			<el-form-item>
				<el-input placeholder="负责人" v-model="search.link_man"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="负责人电话" v-model="search.link_type"></el-input>
			</el-form-item>
			<el-form-item prop="rpt_date">
				<el-date-picker
					v-model="search.rpt_date"
					type="month"
					value-format="timestamp"
					placeholder="日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
	</div>
	<div class="tableBox">
		<el-table :data="table.tableData" border @selection-change="getIds">
			<el-table-column align="center" type="selection" width="50"></el-table-column>
			<el-table-column align="center" prop="name" label="物品名称"></el-table-column>
			<el-table-column align="center" prop="remark"
				label="物品描述" width="250">
			</el-table-column>
			<el-table-column align="center" prop="price" label="物品价格（元）"></el-table-column>
			<el-table-column align="center" prop="buy_info"
				label="采购信息" width="250">
			</el-table-column>
			<el-table-column align="center" prop="link_man" label="负责人"></el-table-column>
			<el-table-column align="center" prop="link_type" label="负责人电话"></el-table-column>
			<el-table-column align="center" prop="rpt_date" label="上报日期"></el-table-column>
			<el-table-column align="center" label="操作" width="80">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="删除" placement="left">
						<el-button circle plain size="small" @click="delRow(scope.row)"
							type="danger" icon="el-icon-delete">
						</el-button>
					</el-tooltip>
	      		</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="table.pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="table.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="table.tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		Ids:"",
		time_type:"date",
		search:{
			depart_id:"{$depart.id|default='0'}",
			link_man:"",
			link_type:"",
			rpt_date:""
		},
		table:{
			tableData:"",
			table_empty_text:"请选择查询条件",
			pageSize:10,
			pageNumber:1,
			tableTotal:0,
		}
	},
	mounted:function() {
		this.getTable();
	},
	methods: {
		changeTimePickerType() {
			switch (this.form.type) {
				case '1':
					this.time_type = "date";
					break;
				case '2':
					this.time_type = "month";
					break;
				case '3':
					this.time_type = "year";
					break;
				case '4':
					this.time_type = "month";
					break;
				default:
					this.$notify.error({title:"错误",message:"请选择报表类型"});
					break;
			}
		},
		getTable() {
			this.loading=true;
			var param = {
				depart_id:this.search.depart_id,
				link_man:this.search.link_man,
				link_type:this.search.link_type,
				rpt_date:Number(this.search.rpt_date)/1000,
				pageSize:this.table.pageSize,
				pageNumber:this.table.pageNumber,
			};
			$.post('{:url("Commit/Asset")}',param,function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({message: res.msg,type: 'success'});
					main.table.tableData = res.data.rows;
					main.table.tableTotal = res.data.total;
				}else{
					main.$notify.error({title: '失败',message: res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.table.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.table.pageNumber = val;
			this.getTable();
		},
		getIds(val){
			this.Ids = val;
		},
		delRow(row){
			if(row.is_del == 0){
				this.$prompt('请输入删除备注', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({ value }) => {
					$.post('{:url("Commit/delAssetRow")}',{
						row_id:row.id,del_remark:value
					},function(res){
						if(res.code == 1){
							main.$notify({title:"成功",type:"success",message:res.msg});
							main.getTable();
						}else{
							main.$notify.error({title:"错误",message:res.msg});
						}
					});
				}).catch(() => {
					this.$message({type: 'info',message: '已取消删除'});
				});
			}else{
				this.$alert(row.del_remark, '删除备注');
			}
		},
		addRow() {
			addRowForm.is_show = true;
		},
		saveRow2Table() {
			var ids = [];
			for(i in this.Ids){
				ids.push(this.Ids[i].id);
			}
			if(ids.length == 0){
				this.$notify.error({title:"错误",message:"请至少选择一行进行保存"});
				return false;
			}
			saveRow2TableForm.is_show = true;
			saveRow2TableForm.form.row_ids = ids;
		}
	}
});
</script>
{/block}

{block name="component"}
<div id="addRowForm">
<el-dialog :title="header" :visible.sync="is_show" top="5vh">
	<div class="FormBox">
		<el-form label-width="100px" :model="form" :rules="addRow_rules" ref="addRowForm_ref">
			<el-form-item label="物品名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入物品名称"></el-input>
			</el-form-item>
			<el-form-item label="物品描述" prop="remark">
				<el-input v-model="form.remark" placeholder="请输入物品描述"></el-input>
			</el-form-item>
			<el-form-item label="物品价格" prop="price">
				<el-input v-model="form.price" type="number" min="0"
					placeholder="请输入物品价格">
				</el-input>
			</el-form-item>
			<el-form-item label="采购信息" prop="buy_info">
				<el-input v-model="form.buy_info" placeholder="请输入采购信息"></el-input>
			</el-form-item>
			<el-form-item label="负责人" prop="link_man">
				<el-input v-model="form.link_man" placeholder="请输入负责人"></el-input>
			</el-form-item>
			<el-form-item label="负责人电话" prop="link_type">
				<el-input v-model="form.link_type" placeholder="请输入负责人电话"></el-input>
			</el-form-item>
		</el-form>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button @click="is_show = false">取消</el-button>
		<el-button type="success" @click="subForm">确定</el-button>
	</div>
</el-dialog>
</div>
<script type="text/javascript">
var addRowForm = new Vue({
	el:"#addRowForm",
	data:{
		header:"添加行",
		is_show:false,
		form:{
			name:"",remark:"",price:"",buy_info:"",link_man:"",link_type:""
		},
		addRow_rules:{
			name:[
				{required:true,message:'物品名称不能为空',trigger:['blur','change']},
				{max:16,message:'长度最多16个字符',trigger:['blur','change']},
			],
			remark:[
				{required:true,message:'物品描述不能为空',trigger:['blur','change']},
				{max:32,message:'长度最多32个字符',trigger:['blur','change']},
			],
			price:[{required:true,message:'物品价格不能为空',trigger:['blur','change']}],
			buy_info:[
				{required:true,message:'采购信息不能为空',trigger:['blur','change']},
				{max:32,message:'长度最多32个字符',trigger:['blur','change']},
			],
			link_man:[{required:true,message:'负责人不能为空',trigger:['blur','change']}],
			link_type:[{required:true,message:'负责人电话不能为空',trigger:['blur','change']}],
		}
	},
	methods:{
		subForm() {
			this.$refs['addRowForm_ref'].validate((valid) => {
				if(valid){
					var param = this.form;
					$.post('{:url("Commit/saveAssetRow")}',param,function(res){
						if(res.code == 1){
							addRowForm.is_show = false;
							addRowForm.resetForm();
							main.$notify({title:"成功",type:"success",message:res.msg});
							main.getTable();
						}else{
							main.$notify.error({title:"错误",message:res.msg});
						}
					});
				}
			});
		},
		resetForm() {
			this.$refs['addRowForm_ref'].resetFields();
		},
	}
});
</script>

<div id="saveRow2TableForm">
<el-dialog :title="header" :visible.sync="is_show" top="5vh">
	<div class="FormBox">
		<el-form label-width="100px" :model="form"
			:rules="saveRow2TableForm_rules" ref="saveRow2TableForm_ref">
			<el-form-item label="上报月份" prop="rpt_date">
				<el-date-picker v-model="form.rpt_date" type="month"
					value-format="timestamp"
					placeholder="选择月份">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="负责人" prop="link_man">
				<el-input v-model="form.link_man" placeholder="请输入负责人"></el-input>
			</el-form-item>
			<el-form-item label="负责人电话" prop="link_type">
				<el-input v-model="form.link_type" placeholder="请输入负责人电话"></el-input>
			</el-form-item>
		</el-form>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button @click="is_show = false">取消</el-button>
		<el-button type="success" @click="subForm">确定</el-button>
	</div>
</el-dialog>
</div>
<script type="text/javascript">
var saveRow2TableForm = new Vue({
	el:"#saveRow2TableForm",
	data:{
		is_show:false,
		header:"保存成表",
		form:{
			depart_id:"{$depart.id|default='0'}",
			rpt_date:"",link_man:"",link_type:"",row_ids:""
		},
		saveRow2TableForm_rules:{
			rpt_date:[{required:true,message:'上报月份不能为空',trigger:['blur','change']}],
			link_man:[{required:true,message:'填表人不能为空',trigger:['blur','change']}],
			link_type:[{required:true,message:'联系方式不能为空',trigger:['blur','change']}],
		}
	},
	methods:{
		subForm() {
			this.$refs['saveRow2TableForm_ref'].validate((valid) => {
				if(valid){
					var param = this.form;
					$.post('{:url("Commit/saveAssetTable")}',param,function(res){
						if(res.code == 1){
							saveRow2TableForm.is_show = false;
							main.$notify({title:"成功",type:"success",message:res.msg});
							main.getTable();
							saveRow2TableForm.$refs['saveRow2TableForm_ref'].resetFields();
						}else{
							main.$notify.error({title:"错误",message:res.msg});
						}
					});
				}
			});
		}
	}
})
</script>
{/block}
